<template>
    <div class="body">
        <div class="row center">
            <span class="history_button" v-text="intentManager.currentHistoryStatus" @click="intentManager.loadHistory()"></span>
        </div>
        <div class="history">
            <!-- 历史记录 -->
            <div class="row" v-for="intent in intentManager.intentListAtHistory" :key="intent.key" :id="intent.key">
                <Intent :intent="intent"></Intent>
            </div>
        </div>
        <div>
            <!-- 当前实体 -->
            <div class="row" v-for="(intent,index) in intentManager.intentList" :key="`intentList-${index}`">
                <Intent :intent="intent"></Intent>
            </div>
        </div>
    </div>
</template>

<script>
import Intent from './body_components/Intent.vue'

export default {
    components: {
        Intent,
    },
    inject: ['intentManager'],
}
</script>

<style scoped>
.body {
    position: relative;
    width: 100%;
    height: calc(100% - 6em);
    background-color: #f5f5f5;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin; /* Firefox */
}

/* 滚动条样式 */
.body::-webkit-scrollbar {
    /* 滚动条的宽 */
    width: 5px;
}
.body::-webkit-scrollbar-thumb {
    /* 滚动条的背景色，圆角 */
    background-color: #d72618;
    border-radius: 10px;
}
.body::-webkit-scrollbar-track {
    /* 滚动槽的背景色，圆角 */
    background-color: #f5f5f5;
    border-radius: 10px;
}
.body::-webkit-scrollbar-button {
    /* 滚动条的上下按钮的高宽 */
    width: 0;
    height: 0;
}
.body::-webkit-scrollbar-corner {
    /* 滚动条的右下角的背景色 */
    background-color: #f5f5f5;
}

.body .row {
    width: 100%;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .2em;
}

.history_button {
    font-size: .6em;
    color: #cacaca;
    cursor: pointer;
    user-select: none;
}

.history {
    display: flex; 
    flex-direction: column-reverse; 
    flex-wrap: nowrap;
}
</style>